<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript">
	$(document).ready(
			function() {
				var status = "fail";
				$("#cancel").click(function() {
					location.href = "book_recent_list.do";
				});//click
				$("#regForm").submit(function() {
					if ($(":input[name=id]").val() == "") {
						alert("아이디를 입력바랍니다.");
						return false;
					}
					if ($(":input[name=password]").val() == "") {
						alert("비밀번호를 입력바랍니다.");
						return false;
					}
					if ($(":input[name=passwordconfirm]").val() == "") {
						alert("비밀번호 확인을 입력바랍니다.");
						return false;
					}
					if ($('#location').val() == "") {
						alert("지역 선택바랍니다.");
						return false;
					}
					if ($('#univ').val() == "") {
						alert("학교 선택바랍니다.");
						return false;
					}
					if($('#phone').val()==""){
						if($('#visible').val() == 1){
							alert("공개하실 휴대폰 번호를 입력바랍니다.");
							return false;
						}else{
							alert("휴대폰 번호를 입력하시면, 거래 시 편리하게 이용하실 수 있습니다.");
						}
					}
				});//submit
				$("#id").keyup(
						function() {
							var id = $("#id").val();
							if(id==""){
									$("#idCheckView").html("사용하실 아이디 안내").css("color","black");
									return false;
							}
							if (id.indexOf('@') <= 0 || id.indexOf('.') < id.indexOf('@')) {
								$("#idCheckView").html("이메일 형식이 아닙니다.").css("color", "red");
							}else {
								$.ajax({
									type : "POST",
									url : "idcheck.do",
									data : "id=" + id,
									success : function(data) {
										if (data.flag == false) {
											$("#idCheckView").html("'" + id + "'가 이미 존재합니다.").css("color", "red");
										} else if (data.flag == true) {
											$("#idCheckView").html("'" + id + "'는 사용 가능합니다.").css("color", "blue");
										}
										status = data.flag;
									}//callback			
								});//ajax
							}//if-else
						});//keyup
						
				$("#password").keyup(
								function() {
									var password = $("#password").val();
									if(password==""){
										$("#passCheckView").html("사용하실 비밀번호 안내").css("color","black");
										return false;
									}
									if (password != $("#passwordconfirm").val()) {
										$("#passCheckView").html("비밀번호가 일치하지 않습니다.").css("color", "red");
									} else {
										$("#passCheckView").html("비밀번호 확인되었습니다.").css("color", "blue");
									}
								});//keyup
				$("#passwordconfirm").keyup(
						function() {
							var passwordconfirm = $("#passwordconfirm").val();
							if(passwordconfirm==""){
								$("#passCheckView").html("사용하실 비밀번호 안내").css("color","black");
								return false;
							}
							if (passwordconfirm != $("#password").val()) {
								$("#passCheckView").html("비밀번호가 일치하지 않습니다.").css("color", "red");
							} else {
								$("#passCheckView").html("비밀번호 확인되었습니다.").css("color", "blue");
							}
						});//keyup
				$("#location").change(function() {
					 $.ajax({
							url:"univSelect.do",
							dataType:"json",
							data:"location="+encodeURIComponent($(this).val()),
							success:function(univListByLocation){
								$("#univ").empty()
								$.each(univListByLocation,function(index, univ){							
									var op="<option value="+univ+">"+univ+"</option>";
									$("#univ").append(op);
								});						
							}//success
						});//ajax
				});//change
			});//ready
</script>
<form id="regForm" action="registerMember.do" method="post">
<fieldset>
	<legend><h2>회원가입</h2></legend>
	<br>
	<h3>필수 정보</h3><br>
	<table cellpadding='10'>
		<tr>
			<td align="right">아이디</td>
			<td><input type="text" placeholder="이메일 입력" name="id" id="id" style="width:240px;"></td>
			<td><img src="${initParame.root }img/ex_mark.png" style="width:13px;"> <font size='2'><span id="idCheckView">사용하실 아이디 안내</span></font></td>
		</tr>
		<tr>
			<td align="right">비밀번호</td>
			<td colspan='2'><input type="password" placeholder="비밀번호 입력" name="password" id="password" style="width:240px;"></td>
		</tr>
		<tr>
			<td align="right">비밀번호 확인</td>
			<td><input type="password" placeholder="비밀번호 확인 입력" name="passwordconfirm" id="passwordconfirm" style="width:240px;"></td>
			<td><img src="${initParame.root }img/ex_mark.png" style="width:13px;"> <font size='2'><span id="passCheckView">사용하실 비밀번호 안내</span></font></td>
		</tr>
		<tr>
			<td align="right">지역선택</td>
			<td colspan='2'><select name="location" id="location"  style="width:240px;">
					<option value="">지역 선택</option>
					<option value="서울특별시">서울특별시</option>
					<option value="경기도">경기도</option>
					<option value="충청도">충청도</option>
					<option value="경상도">경상도</option>
					<option value="전라도">전라도</option>
					<option value="강원도">강원도</option>
					<option value="제주도">제주도</option>
				</select></td>
		</tr>
		<tr>
			<td align="right">학교선택</td>
			<td><select name="univ" id="univ"  style="width:240px;"></select></td>
			<td><font size='2'><img src="${initParame.root }img/ex_mark.png" style="width:13px;"> 지역 선택 먼저</font></td>
		</tr>
	</table> 
	<br>
	<hr>
	<br>
	<h3>부가 정보</h3><br>
	<table cellpadding='10'>
		<tr>
				<td colspan='2'>
					<font size='2'><img src="${initParame.root }img/ex_mark.png" style="width:13px;"> 부가 정보의 '휴대폰 번호'는 판매자 또는 구매 희망자로부터 빠른 연락을 받기 위한 용도입니다. 로그인 사용자에게만 공개됩니다.</font>
				</td>
		</tr>
		<tr>
			<td align="right" width="130px">휴대폰 번호 공개</td>
			<td><select name="visible" id="visible">
					<option value="0">아니오</option>
					<option value="1">예</option>
				</select>
			</td>
			</tr>
		<tr>
			<td align="right">휴대폰 번호</td>
			<td><input type="text" placeholder="휴대폰 번호 입력" name="phone" id="phone" style="width:240px;"><font size='2'>
			&nbsp;&nbsp;<img src="${initParame.root }img/ex_mark.png" style="width:13px;"> 예) 010-1234-5678</font></td>
		</tr>
	</table>
	<br>
	<div style="background-color: #EAEAEA">
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="submit" value="회원가입" style="font-family:'맑은 고딕'; width:100px; height:40px; background-color: #1F50B5; color:white;">
		<input type="button" value="가입취소" id="cancel" style="font-family:'맑은 고딕'; width:100px; height:40px; background-color: #C90000; color:white;">
	</div>
</fieldset>
</form>